<template>
  <section  v-if="checkPermission(['WORK_REPORT_MANAGER','WORK_REPORT_ADMIN'])">
    <div class="section-header">合同执行成员表</div>
    <div class="section-table">
      <div>
        <a-table class="hte-table-content" :columns="columns" :data-source="records" rowKey="id" :pagination="false" size="middle">
          <span slot="realNameRender" slot-scope="text, record">
            <div style="line-height: 2.5">
              <span class="userTag" v-for="(item, index) of record.userList" :key="index">
                {{ item.realName }}
                <span v-if="checkPermission(['WORK_REPORT_MANAGER','WORK_REPORT_ADMIN']) && record.roleName!='合同报工员'" class="removeUserTag" @click="removeUser(record.index, item)"> x </span>
              </span>
            </div>
          </span>
          <template slot="action" slot-scope="text, record">
            <a-button v-if="checkPermission(['WORK_REPORT_MANAGER','WORK_REPORT_ADMIN'])  && record.roleName!='合同报工员'" type="primary" size="small" @click="openUserSelector(record.index)"
              >添加</a-button
            >
          </template>
        </a-table>
      </div>
    </div>
    <UserSelector :show="showUserSelector" ref="userSelectorRef" @selected="selectUser" />
  </section>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import UserSelector from '@/views/workReport/role/UserSelector'
import { Modal } from 'ant-design-vue'
export default {
  components: {
    UserSelector,
  },
  props: {
    projectId: {
      type: String,
      default: '0',
    },
    permission: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      columns: [
        {
          title: '参与角色名称',
          dataIndex: 'roleName',
          key: 'roleName',
          width: '15%',
          align: 'center',
        },
        {
          title: '人员名单',
          dataIndex: 'realName',
          dataIndex: 'realName',
          width: '65%',
          align: 'center',
          scopedSlots: { customRender: 'realNameRender' },
        },
        {
          title: '操作',
          dataIndex: 'delayTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      records: [],
      urls: {
        list: '/workReport/permission/list',
        edit: '/workReport/permission/edit',
      },
      showUserSelector: false,
      rowIndex: 0,
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    init() {
      this.fetchList()
    },
    checkPermission(powers) {
      let hasPower = false
      for (let p of powers) {
        if (this.permission.indexOf(p) > -1) {
          hasPower = true
          break
        }
      }
      return hasPower
    },
    fetchList() {
      let res = getAction(this.urls.list + '/' + this.projectId, {}).then((res) => {
        if (res.success) {
          this.records = res.result
          let rowIndex = 0
          this.records.forEach((record) => {
            record.index = rowIndex++
            this.defaultUser(record.index)
          })
        }
      })
    },
    /**
     * 表结构切换页码
     */
    openUserSelector(index) {
      this.rowIndex = index
      this.$refs.userSelectorRef.init()
      this.showUserSelector = true
    },
    selectUser(selection) {
      if (selection != null && selection.length > 0) {
        let userName = []
        let realName = []
        if (this.records[this.rowIndex].userName) {
          userName = this.records[this.rowIndex].userName.split(',')
          realName = this.records[this.rowIndex].realName.split(',')
        }
        for (let i = 0; i < selection.length; i++) {
          if (userName.indexOf(selection[i].username) <= -1) {
            userName.push(selection[i].username)
            realName.push(selection[i].realname)
          }
        }
        this.$set(this.records[this.rowIndex], 'userName', userName.join(','))
        this.$set(this.records[this.rowIndex], 'realName', realName.join(','))
        this.defaultUser(this.rowIndex)
        this.handleSave(this.records[this.rowIndex])
      }
      this.showUserSelector = false
    },
    defaultUser(rowIndex) {
      let userList = []
      if (this.records[rowIndex].userName && this.records[rowIndex].realName) {
        let userName = this.records[rowIndex].userName.split(',')
        let realName = this.records[rowIndex].realName.split(',')
        for (let i = 0; i < userName.length; i++) {
          userList.push({ userName: userName[i], realName: realName[i] })
        }
      }
      this.$set(this.records[rowIndex], 'userList', userList)
    },
    removeUser(rowIndex, user) {
      const self = this
      Modal.confirm({
        title: '删除确认',
        content: '是否删除[' + this.records[rowIndex].roleName + ']中的参与人员[' + user.realName + ']',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          if (self.records[rowIndex].userName && self.records[rowIndex].realName) {
            let userName = self.records[rowIndex].userName.split(',')
            let realName = self.records[rowIndex].realName.split(',')
            if (userName.indexOf(user.userName) > -1) {
              userName.splice(userName.indexOf(user.userName), 1)
              realName.splice(realName.indexOf(user.realName), 1)
            }
            self.$set(self.records[rowIndex], 'userName', userName.join(','))
            self.$set(self.records[rowIndex], 'realName', realName.join(','))
          }
          self.defaultUser(rowIndex)
          self.handleSave(self.records[rowIndex])
        },
        onCancel() {
          self.destroyAll()
        },
      })
    },
    destroyAll() {
      this.$destroyAll();
    },
    handleSave(permission) {
      postAction(this.urls.edit, permission).then((res) => {
        if (res.success) {
          this.$messageWorkReport.success('保存成功')
           this.fetchList()
        } else {
          this.$messageWorkReport.error(res.message)
        }
      })
    },
  },
  watch: {
    projectId(newV, oldV) {
      this.fetchList()
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.userTag {
  padding: 5px 10px;
  margin: 2px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 3px;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
}
.userTag:hover {
  padding: 5px 10px;
  margin: 2px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 3px;
  line-height: 20px;
  color: red;
  display: inline-block;
}
.removeUserTag {
  margin-right: 0px;
  cursor: pointer;
}
</style> 